<template>
    <el-form :model='elform'
             :rules="rules"
             ref="formRef"
             label-position="right"
             label-width="80px"
    >
        <el-form-item label="菜单父id">
            <el-input v-model="elform.pid"></el-input>
        </el-form-item>
        <el-form-item label="菜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单">
            <el-switch
                    v-model="elform.is_menu"
                    active-color="var(--el-color-success)"
                    active-text="是"
                    inactive-text="否"
                    inline-prompt
            />
        </el-form-item>
        <el-form-item label="显&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示" v-if="elform.is_menu==true">
            <el-switch
                    v-model="elform.is_show"
                    active-color="var(--el-color-success)"
                    active-text="是"
                    inactive-text="否"
                    inline-prompt
            />
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
            <el-input v-model="elform.name"></el-input>
        </el-form-item>
        <el-form-item label="前端路由" v-if="elform.is_menu==true">
            <el-input v-model="elform.route"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" v-if="elform.is_menu==true">
            <el-input v-model="elform.icon"></el-input>
        </el-form-item>
        <el-form-item label="菜单排序" v-if="elform.is_menu==true">
            <el-input v-model="elform.sort"></el-input>
        </el-form-item>

        <el-form-item label="接口类名">
            <el-input v-model="elform.controller"></el-input>
        </el-form-item>
        <el-form-item label="接口方法" class="mb-0">
            <el-input v-model="elform.action"></el-input>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
    import {defineComponent, reactive,ref} from "vue";

    export default defineComponent({
        name: "MenuAdd",
        setup(props, ctx) {
            const elform = reactive({
                pid: '',
                is_menu: true,
                is_show: true,
                name: '',
                route: '',
                icon: '',
                sort: 0,
                controller: '',
                action: '',
            });

            const formRef = ref()
            //验证规则
            const rules = reactive({
                name: [
                    {
                        required: true,
                        message: '名称必填',
                        trigger: 'blur',
                    },
                    {
                        min: 3,
                        max: 5,
                        message: 'Length should be 3 to 5',
                        trigger: 'blur',
                    },
                ]
            })

            //提交方法
            const submitForm = () => {
                formRef.value.validate((valid) => {
                    if (!valid) {
                        ctx.emit('res', false)  //返回结果给父集
                        return false
                    } else {
                        ctx.emit('res', true)
                    }
                })
            }

            return {
                elform,
                submitForm,
                rules,
                formRef
            }
        }
    })
</script>

<style scoped>
    >>> .el-input__inner {
        height: 30px;
        line-height: 30px;
    }
</style>